@use '../mixins/mixins.scss' as *;

@include b(tabbar) {
  position: relative;

  width: 100%;
  box-sizing: content-box!important;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;

  /* 顶部阴影 start */
  @include m(top-shadow) {
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  /* 顶部阴影 end */

  /* 背景颜色 start */
  @include e(bg) {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    /* 毛玻璃 */
    @include m(frosted) {
      backdrop-filter: blur(20rpx);
      -webkit-backdrop-filter: blur(20rpx);
    }
  }
  /* 背景颜色 end */

  /* 内容区域 start */
  @include e(content) {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: inherit;
    display: flex;
    flex-wrap: nowrap;
		flex-direction: row;
  }
  /* 内容区域 end */

  /* 凸起按钮 start */
  @include e(bulge) {
    position: absolute;
    background-color: #fff;
    transform: translateX(-50%);
    border-radius: 50%;

    &.top-shadow {
      box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    }
  }
  /* 凸起按钮 end */

  /* 占位内容 start */
  @include e(placeholder) {
    position: relative;
    background-color: transparent;
    box-sizing: content-box!important;
  }
  /* 占位内容 end */

  /* 固定在底部 start */
  @include m(fixed) {
    // position: absolute;
	position: fixed;
    left: 0;
    bottom: 0;
  }
  /* 固定在底部 end */
  
  @include m(cool) {
    // position: absolute;
  	left: 50%;
  	    bottom: 34px;
  	    display: inline-flex;
  	    justify-content: space-around;
  	    width: auto;
  	    border-radius: 50px;
  	    transform: translateX(-50%);
  	    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  	    padding: 0 15rpx;
  	    height: 50px;
  	    overflow: hidden;
		
		.tn-u-safe-area {
			display: none;
		}
  }
}
